<template>
  <div class="all">
  
  <div class="heard">
    <!-- 头部内容 -->
   
      <van-nav-bar
        title="订单详情"
        style="background-image: linear-gradient(90deg, #bf73ff, #7579ff)"
      />
    
  </div>
  <!-- 导航栏 -->
  <div class="tabs">
<van-tabs v-model="active" @click="onClick">
  <van-tab title="全部订单"></van-tab>
  <van-tab title="待接单"></van-tab>
  <van-tab title="待服务"></van-tab>
  <van-tab title="待确认"></van-tab>
  <van-tab title="已完成"></van-tab>
</van-tabs>
  </div>
<!-- 内容 -->
  <div id="neiro">
<van-card
  :num="dindan.orderLines.length"
  :price="dindan.total+'.00'"
  :desc="dindan.address.province+dindan.address.city+dindan.address.area+dindan.address.address"
  :title="dindan.customer.username"
  :thumb="dindan.customer.userFace"
  v-for="(dindan,index) in orderData" :key="dindan.id"
  @click="toDetail(dindan, index)"
>
  <template #tags>
    <van-tag style="background-image: linear-gradient(90deg, #bf73ff, #7579ff)">{{dindan.status}}</van-tag><br>
    下单时间: <span>{{ moment(dindan.orderTime).format('YYYY-MM-DD HH:mm:SS') }}</span><br>
    
  </template>
  <template #footer>
    
  </template>
 
</van-card>
 <div v-if="orderData.length == 0">
                <van-empty description="暂无数据" />
          </div>
 <div style="height:120px"></div>
  </div>
 
  </div>
</template>

<script>
import { get, post, post_json } from "@/http/axios";
import { mapMutations, mapActions ,mapState} from 'vuex'
const moment = require("moment");
export default {
  data() {
    return {
      active:0,
      //   全部订单数据
      orderData: [],
      employeeId:'',
    };
  },
  computed:{
    ...mapState('user',['userInfo'])
  },
  methods: {
  
    moment,
    //跳转到订单详情页面 并且传递参数
    toDetail(dindanId,activeKey){
        //使用编程式导航
        this.$router.push({
            //路径
            path:'/manager/detail',
            //传参数
            query:{
                dindanId,
                activeKey
            }
        })

    },
     onClick(name, title) {
      if (title == "全部订单") {
        this.getAllOrderData();
      } else {
        this.getAllOrderData(title);
      }
    },
    getAllOrderData(title) {
      let data = {
        page: 1,
        pageSize: 100,
        employeeId:this.userInfo.id,
        status:title,
      };
     get('/order/pageQuery',data).then(res=>{
        if(res.data.status === 200){
          
          this.orderData = res.data.data.list
        }
      })
    },
  },

  created() {
    this.getAllOrderData();
  },
};
</script>

<style scoped>
.van-card {
box-shadow: 0 0 6px 0 #ccc;
display: flex;
padding: 1em 1em;
border-radius: 20px;
margin-top: 20px;

}
#neiro {
  margin-top: 20px;
}
#neiro .van-card__thumb img {
  border-radius:50% !important;
}
</style>